<template>
  <h2>sum:{{ sum }}</h2>
  <br />
  <button type="" @click="sum++">点击+1</button>
  <hr />
  <h2>当前鼠标点击时的坐标,x:{{ point.x }},y:{{ point.y }}</h2>
</template>

<script>
import { ref, reactive, onMounted ,onUnmounted} from "vue";
import userPoint from"../hooks/userPoint.js"

export default {
  name: "Demo",
  setup() {
    //数据
    let sum = ref(0);
    let point = userPoint()

    //hook，本质是一个函数，吧setup函数中使用的Composition Api进行了封装
    // 类似于Vue2.x中的mixin
    //自定义hook的优势：复用代码，让setup中的逻辑更清楚易懂

    console.log('point :>> ', point);

    // 返回一个对象（常用）
    return {
      sum,
      point,
    };
  },
};
</script>
